<template>
    <div class="article-list-container">
        <h2>分类文章列表</h2>
        <div class="article-card" v-for="article in articleList" :key="article.id">
            <img :src="article.titleImage" alt="文章封面" style="width: 200px; height: 120px; object-fit: cover;">
            <div class="article-info">
                <h3>
                    <router-link :to="{ name: 'ArticleDetail', params: { id: article.id } }">
                        {{ article.title }}
                    </router-link>
                </h3>
                <p>分类：{{ article.category.name }}</p>
                <p>发布时间：{{ article.createTime }}</p>
                <p>标签：{{article.tags.map(tag => tag.name).join(', ')}}</p>
                <p>描述：{{ article.description }}</p>
            </div>
        </div>
        <!-- 无数据提示 -->
        <div v-if="articleList.length === 0" style="text-align: center; padding: 20px;">
            暂无该分类的文章数据
        </div>
    </div>
</template>
<script>
export default {
    name: 'ArticleList',
    data() {
        return {
            articleList: [], //接收到的tag数据
            pageParams: { //tag列表页码显示
                current: 1,//页码
                size: 10//条数
            }
        };
    },
    created() {
        // 页面初始化时：1. 获取分类ID 2. 请求文章列表接口
        this.getArticleList();
    },
    methods: {
        async getArticleList() {
            // 从tagchild传过来的参数
            const articleList = this.$route.query.tagId;
            console.log(articleList);

            if (!articleList) { // 若没传分类ID，提示并返回
                this.$message.warning('请选择具体分类');
                return;
            }
            // 分页参数+tagId
            const res = await this.$axios.post(
                'http://47.104.167.34:9110/api/tag/article/list',
                {
                    ...this.pageParams, // 分页参数（current/size）
                    tagId: articleList
                }
            );

            // 3. 处理接口返回数据
            if (res.data.success) {
                this.articleList = res.data.data; // 赋值文章列表（接口返回的data数组）
            } else {
                this.$message.error(`获取文章列表失败：${res.data.message || '未知错误'}`);
            }
        }
    }
};
</script>
<style scoped>
.article-list-container {
    padding: 20px;
}

.article-card {
    display: flex;
    gap: 20px;
    padding: 15px;
    border: 1px solid #eee;
    margin-bottom: 15px;
    border-radius: 4px;
}

.article-info {
    flex: 1;
}

.article-info h3 {
    margin: 0 0 10px;
    color: #333;
}

.article-info p {
    margin: 5px 0;
    color: #666;
    font-size: 14px;
}
</style>